<style>
    :root {
        --primary: #4F46E5;
        --primary-light: #818CF8;
        --primary-dark: #4338CA;
        --secondary: #6366F1;
        --success: #10B981;
        --warning: #F59E0B;
        --danger: #EF4444;
        --gray: #6B7280;
        --light-gray: #F3F4F6;
        --dark-gray: #374151;
        --text-dark: #1F2937;
        --text-light: #F9FAFB;
        --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        --radius: 10px;
        --transition: all 0.25s ease;
    }

    body {
        font-family: 'Inter', system-ui, -apple-system, sans-serif;
        background-color: #F0F2F5;
        color: var(--text-dark);
        height: 100vh;
        overflow: hidden;
    }

    .chat-container {
        display: flex;
        height: 100vh;
        max-width: 1400px;
        margin: 0 auto;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    }

    /* 侧边栏样式 */
    .chat-sidebar {
        width: 360px;
        background-color: white;
        border-right: 1px solid var(--light-gray);
        display: flex;
        flex-direction: column;
        z-index: 10;
    }

    .chat-sidebar .sidebar-header {
        padding: 1rem 1.25rem;
        border-bottom: 1px solid var(--light-gray);
    }

    .chat-sidebar .user-profile {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .chat-sidebar .profile-info {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .chat-sidebar .profile-avatar {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        object-fit: cover;
        cursor: pointer;
        transition: var(--transition);
    }

    .chat-sidebar .profile-avatar:hover {
        transform: scale(1.05);
    }

    .chat-sidebar .profile-name {
        font-weight: 600;
        margin: 0;
    }

    .chat-sidebar .action-buttons {
        display: flex;
        gap: 0.75rem;
    }

    .chat-sidebar .action-btn {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background-color: var(--light-gray);
        border: none;
        color: var(--dark-gray);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: var(--transition);
        cursor: pointer;
    }

    .chat-sidebar .action-btn:hover {
        background-color: var(--primary-light);
        color: white;
    }

    .chat-sidebar .search-bar {
        padding: 0.75rem 1.25rem;
        border-bottom: 1px solid var(--light-gray);
    }

    .chat-sidebar .search-input {
        width: 100%;
        background-color: var(--light-gray);
        border: none;
        border-radius: 8px;
        padding: 0.65rem 1rem 0.65rem 2.5rem;
        font-size: 0.9rem;
        transition: var(--transition);
    }

    .chat-sidebar .search-input:focus {
        outline: none;
        background-color: white;
        box-shadow: 0 0 0 2px var(--primary-light);
    }

    .chat-sidebar .search-icon {
        position: relative;
        left: 2.5rem;
        color: var(--gray);
    }

    .chat-sidebar .chat-tabs {
        display: flex;
        border-bottom: 1px solid var(--light-gray);
    }

    .chat-sidebar .chat-tab {
        flex: 1;
        padding: 0.75rem;
        text-align: center;
        font-weight: 500;
        font-size: 0.95rem;
        color: var(--gray);
        cursor: pointer;
        transition: var(--transition);
        position: relative;
    }

    .chat-sidebar .chat-tab.active {
        color: var(--primary);
    }

    .chat-sidebar .chat-tab.active::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        width: 100%;
        height: 3px;
        background-color: var(--primary);
        border-radius: 3px 3px 0 0;
    }

    .chat-sidebar .chat-tab:hover:not(.active) {
        background-color: var(--light-gray);
        color: var(--dark-gray);
    }

    .chat-sidebar .chat-list {
        flex: 1;
        overflow-y: auto;
    }

    .chat-sidebar .chat-item {
        padding: 0.85rem 1.25rem;
        display: flex;
        align-items: center;
        gap: 1rem;
        cursor: pointer;
        transition: var(--transition);
        border-bottom: 1px solid var(--light-gray);
    }

    .chat-sidebar .chat-item:hover {
        background-color: var(--light-gray);
    }

    .chat-sidebar .chat-item.active {
        background-color: rgba(79, 70, 229, 0.05);
    }

    .chat-sidebar .chat-avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        object-fit: cover;
        position: relative;
    }

    .chat-sidebar .online-indicator {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background-color: var(--success);
        border: 2px solid white;
    }

    .chat-sidebar .chat-info {
        flex: 1;
        min-width: 0;
    }

    .chat-sidebar .chat-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.15rem;
    }

    .chat-sidebar .chat-name {
        font-weight: 600;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .chat-sidebar .chat-time {
        font-size: 0.8rem;
        color: var(--gray);
    }

    .chat-sidebar .chat-message {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .chat-sidebar .message-text {
        font-size: 0.9rem;
        color: var(--gray);
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 200px;
    }

    .chat-sidebar .message-text.sender {
        color: var(--dark-gray);
        font-weight: 500;
    }

    .chat-sidebar .unread-count {
        background-color: var(--primary);
        color: white;
        font-size: 0.75rem;
        font-weight: 600;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 0.5rem;
    }

    /* 聊天主区域样式 */
    .chat-main {
        flex: 1;
        display: flex;
        flex-direction: column;
        background-color: #E5E5EA;
        background-image: url('https://picsum.photos/id/1048/1200/800');
        background-size: cover;
        background-position: center;
        position: relative;
    }

    .chat-main::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(255, 255, 255, 0.85);
        z-index: -1;
    }

    .chat-main .chat-header {
        background-color: white;
        padding: 0.75rem 1.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .chat-main .chat-partner {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .chat-main .partner-avatar {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        object-fit: cover;
    }

    .chat-main .partner-info {
        min-width: 0;
    }

    .chat-main .partner-name {
        font-weight: 600;
        margin: 0 0 0.1rem 0;
    }

    .chat-main .partner-status {
        font-size: 0.8rem;
        color: var(--gray);
        margin: 0;
    }

    .chat-main .chat-actions {
        display: flex;
        gap: 1rem;
    }

    .chat-main .chat-action-btn {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background-color: transparent;
        border: none;
        color: var(--dark-gray);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: var(--transition);
        cursor: pointer;
        position: relative;
    }

    .chat-main .chat-action-btn:hover {
        background-color: var(--light-gray);
        color: var(--primary);
    }

    .chat-main .chat-action-btn .dropdown-menu {
        position: absolute;
        top: 100%;
        right: 0;
        margin-top: 0.5rem;
        min-width: 180px;
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        border: none;
        z-index: 100;
    }

    .chat-main .chat-messages {
        flex: 1;
        padding: 1.5rem;
        overflow-y: auto;
    }

    .chat-main .message {
        margin-bottom: 1rem;
        max-width: 70%;
        animation: fadeIn 0.3s ease;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .chat-main .message.received {
        margin-right: auto;
    }

    .chat-main .message.sent {
        margin-left: auto;
    }

    .chat-main .message-content {
        padding: 0.75rem 1rem;
        border-radius: 18px;
        position: relative;
        word-wrap: break-word;
    }

    .chat-main .received .message-content {
        background-color: white;
        border-top-left-radius: 4px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    .chat-main .sent .message-content {
        background-color: var(--primary);
        color: white;
        border-top-right-radius: 4px;
        box-shadow: 0 1px 2px rgba(79, 70, 229, 0.2);
    }

    .chat-main .message-time {
        font-size: 0.75rem;
        margin-top: 0.25rem;
        opacity: 0.7;
    }

    .chat-main .received .message-time {
        text-align: left;
        padding-left: 1rem;
    }

    .chat-main .sent .message-time {
        text-align: right;
        padding-right: 1rem;
    }

    .chat-main .message-input-area {
        background-color: white;
        padding: 0.75rem 1.5rem;
        display: flex;
        align-items: center;
        gap: 1rem;
        border-top: 1px solid var(--light-gray);
    }

    .chat-main .input-actions {
        display: flex;
        gap: 0.75rem;
    }

    .chat-main .input-action-btn {
        background: none;
        border: none;
        color: var(--gray);
        font-size: 1.1rem;
        cursor: pointer;
        transition: var(--transition);
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .chat-main .input-action-btn:hover {
        background-color: var(--light-gray);
        color: var(--primary);
    }

    .chat-main .message-input {
        flex: 1;
        background-color: var(--light-gray);
        border: none;
        border-radius: 20px;
        padding: 0.85rem 1.25rem;
        font-size: 0.95rem;
        transition: var(--transition);
        min-height: 44px;
        max-height: 120px;
        overflow-y: auto;
    }

    .chat-main .message-input:focus {
        outline: none;
        box-shadow: 0 0 0 2px var(--primary-light);
    }

    .chat-main .send-btn {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background-color: var(--primary);
        color: white;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: var(--transition);
    }

    .chat-main .send-btn:hover {
        background-color: var(--primary-dark);
        transform: scale(1.05);
    }

    .chat-main .send-btn:disabled {
        background-color: var(--light-gray);
        color: var(--gray);
        cursor: not-allowed;
        transform: none;
    }

    /* 资料卡片样式 */
    .profile-card, .group-card {
        position: fixed;
        top: 0;
        right: -400px;
        width: 380px;
        height: 100vh;
        background-color: white;
        box-shadow: -2px 0 15px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        transition: right 0.3s ease;
        overflow-y: auto;
    }

    .profile-card.active, .group-card.active {
        right: 0;
    }

    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    .overlay.active {
        opacity: 1;
        visibility: visible;
    }

    .profile-card .card-header {
        padding: 1.25rem;
        border-bottom: 1px solid var(--light-gray);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .profile-card .card-title {
        font-weight: 600;
        font-size: 1.2rem;
        margin: 0;
    }

    .profile-card .close-card {
        background: none;
        border: none;
        font-size: 1.25rem;
        color: var(--gray);
        cursor: pointer;
        transition: var(--transition);
    }

    .profile-card .close-card:hover {
        color: var(--danger);
    }

    .profile-card .profile-header {
        padding: 1.5rem;
        text-align: center;
    }

    .profile-card .profile-header-avatar {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        object-fit: cover;
        margin: 0 auto 1rem;
        border: 4px solid white;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    .profile-card .profile-header-name {
        font-weight: 600;
        font-size: 1.4rem;
        margin: 0 0 0.25rem 0;
    }

    .profile-card .profile-header-bio {
        color: var(--gray);
        margin: 0 0 1rem 0;
    }

    .profile-card .profile-actions {
        display: flex;
        gap: 0.75rem;
        justify-content: center;
        margin-bottom: 1rem;
    }

    .profile-card .profile-action-btn {
        padding: 0.5rem 1.25rem;
        border-radius: 8px;
        font-weight: 500;
        font-size: 0.9rem;
        transition: var(--transition);
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .profile-card .primary-btn {
        background-color: var(--primary);
        color: white;
        border: none;
    }

    .profile-card .primary-btn:hover {
        background-color: var(--primary-dark);
    }

    .profile-card .secondary-btn {
        background-color: white;
        color: var(--primary);
        border: 1px solid var(--primary);
    }

    .profile-card .secondary-btn:hover {
        background-color: rgba(79, 70, 229, 0.05);
    }

    .profile-card .profile-section {
        padding: 1rem 1.5rem;
        border-bottom: 1px solid var(--light-gray);
    }

    .profile-card .section-title {
        font-size: 0.85rem;
        text-transform: uppercase;
        color: var(--gray);
        margin: 0 0 0.75rem 0;
        letter-spacing: 0.5px;
    }

    .profile-card .profile-detail {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        margin-bottom: 0.75rem;
    }

    .profile-card .profile-detail:last-child {
        margin-bottom: 0;
    }

    .profile-card .detail-icon {
        color: var(--primary);
        margin-top: 0.25rem;
        width: 20px;
        text-align: center;
    }

    .profile-card .detail-content {
        flex: 1;
    }

    .profile-card .detail-label {
        font-size: 0.85rem;
        color: var(--gray);
        margin: 0 0 0.15rem 0;
    }

    .profile-card .detail-value {
        font-weight: 500;
        margin: 0;
    }

    /* 群管理和用户管理样式 */
    .management-section {
        padding: 1rem 1.5rem;
    }

    .management-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--light-gray);
        cursor: pointer;
        transition: var(--transition);
    }

    .management-item:last-child {
        border-bottom: none;
    }

    .management-item:hover {
        background-color: var(--light-gray);
    }

    .management-item:hover .item-name {
        color: var(--primary);
    }

    .management-item .item-info {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .management-item .item-icon {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background-color: rgba(79, 70, 229, 0.1);
        color: var(--primary);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .management-item .item-name {
        font-weight: 500;
        margin: 0;
        transition: var(--transition);
    }

    .management-item .item-arrow {
        color: var(--gray);
    }

    /* 响应式调整 */
    @media (max-width: 992px) {
        .chat-sidebar {
            width: 300px;
        }

        .profile-card, .group-card {
            width: 320px;
        }
    }

    @media (max-width: 768px) {
        .chat-sidebar {
            position: absolute;
            left: -360px;
            height: 100%;
            transition: left 0.3s ease;
        }

        .chat-sidebar.active {
            left: 0;
        }

        .chat-main .mobile-menu-toggle {
            display: block !important;
        }

        .chat-main .message {
            max-width: 85%;
        }
    }

    .chat-main .mobile-menu-toggle {
        display: none;
        position: absolute;
        top: 1rem;
        left: 1rem;
        z-index: 20;
        background-color: white;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        box-shadow: var(--shadow);
        border: none;
        color: var(--primary);
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
</style>

<div class="chat-container">
    <!-- 侧边栏 -->
    <div class="chat-sidebar">
        <div class="sidebar-header">
            <div class="user-profile">
                <div class="profile-info">
                    <img src="https://picsum.photos/id/64/42/42" alt="当前用户头像" class="profile-avatar"
                         id="currentUserAvatar">
                    <h3 class="profile-name">张明辉</h3>
                </div>
                <div class="action-buttons">
                    <button class="action-btn" title="设置">
                        <i class="fas fa-cog"></i>
                    </button>
                    <button class="action-btn" title="新建聊天">
                        <i class="fas fa-plus"></i>
                    </button>
                </div>
            </div>
        </div>

        <div class="search-bar">
            <i class="fas fa-search search-icon"></i>
            <input type="text" class="search-input" placeholder="搜索聊天、联系人或群组...">
        </div>

        <div class="chat-tabs">
            <div class="chat-tab active">聊天</div>
            <div class="chat-tab">联系人</div>
            <div class="chat-tab">群组</div>
        </div>

        <div class="chat-list">
            <!-- 聊天列表项 - 当前选中 -->
            <div class="chat-item active" data-chat="private" data-id="1">
                <div class="chat-avatar">
                    <img src="https://picsum.photos/id/65/50/50" alt="李婷婷的头像">
                    <span class="online-indicator"></span>
                </div>
                <div class="chat-info">
                    <div class="chat-header">
                        <h4 class="chat-name">李婷婷</h4>
                        <span class="chat-time">10:23</span>
                    </div>
                    <div class="chat-message">
                        <p class="message-text sender">好的，我稍后发给你</p>
                        <span class="unread-count">2</span>
                    </div>
                </div>
            </div>

            <!-- 聊天列表项 - 群聊 -->
            <div class="chat-item" data-chat="group" data-id="101">
                <div class="chat-avatar">
                    <img src="https://picsum.photos/id/20/50/50" alt="前端开发者联盟的头像">
                </div>
                <div class="chat-info">
                    <div class="chat-header">
                        <h4 class="chat-name">前端开发者联盟</h4>
                        <span class="chat-time">昨天</span>
                    </div>
                    <div class="chat-message">
                        <p class="message-text">王建国: 大家看看这个新框架</p>
                        <span class="unread-count">5</span>
                    </div>
                </div>
            </div>

            <!-- 聊天列表项 -->
            <div class="chat-item" data-chat="private" data-id="2">
                <div class="chat-avatar">
                    <img src="https://picsum.photos/id/91/50/50" alt="王建国的头像">
                    <span class="online-indicator"></span>
                </div>
                <div class="chat-info">
                    <div class="chat-header">
                        <h4 class="chat-name">王建国</h4>
                        <span class="chat-time">周三</span>
                    </div>
                    <div class="chat-message">
                        <p class="message-text">那个项目的代码我已经提交了</p>
                    </div>
                </div>
            </div>

            <!-- 聊天列表项 -->
            <div class="chat-item" data-chat="private" data-id="3">
                <div class="chat-avatar">
                    <img src="https://picsum.photos/id/64/50/50" alt="张晓明的头像">
                </div>
                <div class="chat-info">
                    <div class="chat-header">
                        <h4 class="chat-name">张晓明</h4>
                        <span class="chat-time">周一</span>
                    </div>
                    <div class="chat-message">
                        <p class="message-text sender">产品原型我已经更新了</p>
                    </div>
                </div>
            </div>

            <!-- 聊天列表项 - 群聊 -->
            <div class="chat-item" data-chat="group" data-id="102">
                <div class="chat-avatar">
                    <img src="https://picsum.photos/id/21/50/50" alt="UI/UX设计交流群的头像">
                </div>
                <div class="chat-info">
                    <div class="chat-header">
                        <h4 class="chat-name">UI/UX设计交流群</h4>
                        <span class="chat-time">上周</span>
                    </div>
                    <div class="chat-message">
                        <p class="message-text">李婷婷: 分享几个优秀设计案例</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 聊天主区域 -->
    <div class="chat-main">
        <button class="mobile-menu-toggle">
            <i class="fas fa-bars"></i>
        </button>

        <div class="chat-header">
            <div class="chat-partner">
                <img src="https://picsum.photos/id/65/45/45" alt="李婷婷的头像" class="partner-avatar" id="partnerAvatar">
                <div class="partner-info">
                    <h3 class="partner-name" id="partnerName">李婷婷</h3>
                    <p class="partner-status" id="partnerStatus">在线 · 正在输入...</p>
                </div>
            </div>
            <div class="chat-actions">
                <button class="chat-action-btn" title="查看资料" id="viewProfileBtn">
                    <i class="fas fa-user"></i>
                </button>
                <button class="chat-action-btn" title="更多选项" id="moreOptionsBtn">
                    <i class="fas fa-ellipsis-v"></i>
                    <div class="dropdown-menu">
                        <div class="management-item">
                            <div class="item-info">
                                <div class="item-icon">
                                    <i class="fas fa-phone"></i>
                                </div>
                                <p class="item-name">语音通话</p>
                            </div>
                            <i class="fas fa-chevron-right item-arrow"></i>
                        </div>
                        <div class="management-item">
                            <div class="item-info">
                                <div class="item-icon">
                                    <i class="fas fa-video"></i>
                                </div>
                                <p class="item-name">视频通话</p>
                            </div>
                            <i class="fas fa-chevron-right item-arrow"></i>
                        </div>
                        <div class="management-item">
                            <div class="item-info">
                                <div class="item-icon">
                                    <i class="fas fa-ban"></i>
                                </div>
                                <p class="item-name">屏蔽此人</p>
                            </div>
                            <i class="fas fa-chevron-right item-arrow"></i>
                        </div>
                    </div>
                </button>
            </div>
        </div>

        <div class="chat-messages" id="chatMessages">
            <div class="message received">
                <div class="message-content">
                    嗨，张明辉！你上次分享的那篇关于React性能优化的文章很棒，我学到了很多。
                </div>
                <div class="message-time">昨天 09:42</div>
            </div>

            <div class="message sent">
                <div class="message-content">
                    谢谢！我也是在实际项目中遇到了一些性能问题，才研究了一下相关的优化方案。
                </div>
                <div class="message-time">昨天 10:15</div>
            </div>

            <div class="message received">
                <div class="message-content">
                    我们团队最近也在做一个React项目，正好遇到了类似的问题。你有时间的话可以详细聊聊吗？
                </div>
                <div class="message-time">昨天 10:18</div>
            </div>

            <div class="message sent">
                <div class="message-content">
                    没问题，我今天下午有空，你看什么时间方便？
                </div>
                <div class="message-time">昨天 10:21</div>
            </div>

            <div class="message received">
                <div class="message-content">
                    下午3点怎么样？到时候我把遇到的具体问题整理一下发给你
                </div>
                <div class="message-time">昨天 10:23</div>
            </div>
        </div>

        <div class="message-input-area">
            <div class="input-actions">
                <button class="input-action-btn" title="表情">
                    <i class="far fa-smile"></i>
                </button>
                <button class="input-action-btn" title="图片">
                    <i class="far fa-image"></i>
                </button>
                <button class="input-action-btn" title="文件">
                    <i class="far fa-file"></i>
                </button>
            </div>
            <textarea class="message-input" placeholder="输入消息..." id="messageInput"></textarea>
            <button class="send-btn" id="sendBtn" disabled>
                <i class="fas fa-paper-plane"></i>
            </button>
        </div>
    </div>
</div>

<!-- 用户资料卡片 -->
<div class="profile-card" id="profileCard">
    <div class="card-header">
        <h3 class="card-title">用户资料</h3>
        <button class="close-card" id="closeProfileBtn">
            <i class="fas fa-times"></i>
        </button>
    </div>

    <div class="profile-header">
        <img src="https://picsum.photos/id/65/100/100" alt="李婷婷的头像" class="profile-header-avatar">
        <h2 class="profile-header-name">李婷婷</h2>
        <p class="profile-header-bio">UI/UX设计师 · 专注于用户体验设计</p>

        <div class="profile-actions">
            <button class="profile-action-btn primary-btn">
                <i class="fas fa-comment"></i> 发消息
            </button>
            <button class="profile-action-btn secondary-btn">
                <i class="fas fa-phone"></i> 通话
            </button>
        </div>

        <div class="profile-stats" style="display: flex; justify-content: center; gap: 2rem;">
            <div class="stat-item">
                <p class="stat-value">143</p>
                <p class="stat-label">动态</p>
            </div>
            <div class="stat-item">
                <p class="stat-value">568</p>
                <p class="stat-label">关注</p>
            </div>
            <div class="stat-item">
                <p class="stat-value">2.4k</p>
                <p class="stat-label">粉丝</p>
            </div>
        </div>
    </div>

    <div class="profile-section">
        <h4 class="section-title">基本信息</h4>
        <div class="profile-detail">
            <div class="detail-icon">
                <i class="fas fa-briefcase"></i>
            </div>
            <div class="detail-content">
                <p class="detail-label">职业</p>
                <p class="detail-value">UI/UX设计师 @ 创新科技</p>
            </div>
        </div>
        <div class="profile-detail">
            <div class="detail-icon">
                <i class="fas fa-graduation-cap"></i>
            </div>
            <div class="detail-content">
                <p class="detail-label">教育背景</p>
                <p class="detail-value">中央美术学院 · 视觉传达设计</p>
            </div>
        </div>
        <div class="profile-detail">
            <div class="detail-icon">
                <i class="fas fa-map-marker-alt"></i>
            </div>
            <div class="detail-content">
                <p class="detail-label">所在地</p>
                <p class="detail-value">北京市</p>
            </div>
        </div>
        <div class="profile-detail">
            <div class="detail-icon">
                <i class="fas fa-calendar"></i>
            </div>
            <div class="detail-content">
                <p class="detail-label">加入时间</p>
                <p class="detail-value">2020年3月</p>
            </div>
        </div>
    </div>

    <div class="profile-section">
        <h4 class="section-title">个人简介</h4>
        <p style="margin: 0; line-height: 1.6;">专注于用户体验设计和交互设计，热衷于创造既美观又实用的产品。喜欢研究各种设计趋势和前沿技术，希望通过设计让产品更加人性化。</p>
    </div>

    <div class="management-section">
        <h4 class="section-title">用户管理</h4>
        <div class="management-item">
            <div class="item-info">
                <div class="item-icon">
                    <i class="fas fa-user-plus"></i>
                </div>
                <p class="item-name">添加到联系人</p>
            </div>
            <i class="fas fa-chevron-right item-arrow"></i>
        </div>
        <div class="management-item">
            <div class="item-info">
                <div class="item-icon">
                    <i class="fas fa-star"></i>
                </div>
                <p class="item-name">设为星标联系人</p>
            </div>
            <i class="fas fa-chevron-right item-arrow"></i>
        </div>
        <div class="management-item">
            <div class="item-info">
                <div class="item-icon">
                    <i class="fas fa-share-alt"></i>
                </div>
                <p class="item-name">分享联系人</p>
            </div>
            <i class="fas fa-chevron-right item-arrow"></i>
        </div>
        <div class="management-item">
            <div class="item-info">
                <div class="item-icon" style="background-color: rgba(239, 68, 68, 0.1); color: var(--danger);">
                    <i class="fas fa-ban"></i>
                </div>
                <p class="item-name">屏蔽此用户</p>
            </div>
            <i class="fas fa-chevron-right item-arrow"></i>
        </div>
    </div>
</div>

<!-- 群组资料卡片 -->
<div class="group-card" id="groupCard">
    <div class="card-header">
        <h3 class="card-title">群组资料</h3>
        <button class="close-card" id="closeGroupBtn">
            <i class="fas fa-times"></i>
        </button>
    </div>

    <div class="profile-header">
        <img src="https://picsum.photos/id/20/100/100" alt="前端开发者联盟的头像" class="profile-header-avatar">
        <h2 class="profile-header-name">前端开发者联盟</h2>
        <p class="profile-header-bio">分享前端开发技术、经验和资源的专业社群</p>

        <div class="profile-actions">
            <button class="profile-action-btn primary-btn">
                <i class="fas fa-comment"></i> 发消息
            </button>
            <button class="profile-action-btn secondary-btn">
                <i class="fas fa-user-plus"></i> 邀请
            </button>
        </div>

        <div class="profile-stats" style="display: flex; justify-content: center; gap: 2rem;">
            <div class="stat-item">
                <p class="stat-value">12.5k</p>
                <p class="stat-label">成员</p>
            </div>
            <div class="stat-item">
                <p class="stat-value">32</p>
                <p class="stat-label">今日新帖</p>
            </div>
            <div class="stat-item">
                <p class="stat-value">2021</p>
                <p class="stat-label">创建于</p>
            </div>
        </div>
    </div>

    <div class="profile-section">
        <h4 class="section-title">群组信息</h4>
        <div class="profile-detail">
            <div class="detail-icon">
                <i class="fas fa-user"></i>
            </div>
            <div class="detail-content">
                <p class="detail-label">群主</p>
                <p class="detail-value">王建国 (前端技术专家)</p>
            </div>
        </div>
        <div class="profile-detail">
            <div class="detail-icon">
                <i class="fas fa-shield-alt"></i>
            </div>
            <div class="detail-content">
                <p class="detail-label">群类型</p>
                <p class="detail-value">公开群 · 可搜索</p>
            </div>
        </div>
        <div class="profile-detail">
            <div class="detail-icon">
                <i class="fas fa-hashtag"></i>
            </div>
            <div class="detail-content">
                <p class="detail-label">群标签</p>
                <p class="detail-value">前端开发、JavaScript、HTML、CSS、React、Vue</p>
            </div>
        </div>
    </div>

    <div class="profile-section">
        <h4 class="section-title">群组简介</h4>
        <p style="margin: 0; line-height: 1.6;">
            前端开发者联盟是一个专注于前端技术交流的社区，这里汇集了来自各地的前端开发者。我们分享技术经验、讨论行业趋势、解决技术难题，欢迎各位前端爱好者加入！</p>
    </div>

    <div class="management-section">
        <h4 class="section-title">群组管理</h4>
        <div class="management-item">
            <div class="item-info">
                <div class="item-icon">
                    <i class="fas fa-users"></i>
                </div>
                <p class="item-name">查看群成员</p>
            </div>
            <i class="fas fa-chevron-right item-arrow"></i>
        </div>
        <div class="management-item">
            <div class="item-info">
                <div class="item-icon">
                    <i class="fas fa-bell-slash"></i>
                </div>
                <p class="item-name">群消息免打扰</p>
            </div>
            <i class="fas fa-chevron-right item-arrow"></i>
        </div>
        <div class="management-item">
            <div class="item-info">
                <div class="item-icon">
                    <i class="fas fa-star"></i>
                </div>
                <p class="item-name">设为星标群组</p>
            </div>
            <i class="fas fa-chevron-right item-arrow"></i>
        </div>
        <div class="management-item">
            <div class="item-info">
                <div class="item-icon" style="background-color: rgba(239, 68, 68, 0.1); color: var(--danger);">
                    <i class="fas fa-sign-out-alt"></i>
                </div>
                <p class="item-name">退出群组</p>
            </div>
            <i class="fas fa-chevron-right item-arrow"></i>
        </div>
    </div>
</div>

<!-- 遮罩层 -->
<div class="overlay" id="overlay"></div>


<script>
	document.addEventListener('DOMContentLoaded', function () {
		// DOM元素
		const messageInput = document.getElementById('messageInput');
		const sendBtn = document.getElementById('sendBtn');
		const chatMessages = document.getElementById('chatMessages');
		const chatItems = document.querySelectorAll('.chat-item');
		const partnerName = document.getElementById('partnerName');
		const partnerAvatar = document.getElementById('partnerAvatar');
		const partnerStatus = document.getElementById('partnerStatus');
		const viewProfileBtn = document.getElementById('viewProfileBtn');
		const profileCard = document.getElementById('profileCard');
		const groupCard = document.getElementById('groupCard');
		const closeProfileBtn = document.getElementById('closeProfileBtn');
		const closeGroupBtn = document.getElementById('closeGroupBtn');
		const overlay = document.getElementById('overlay');
		const currentUserAvatar = document.getElementById('currentUserAvatar');
		const moreOptionsBtn = document.getElementById('moreOptionsBtn');
		const mobileMenuToggle = document.querySelector('.mobile-menu-toggle');
		const chatSidebar = document.querySelector('.chat-sidebar');

		// 检查输入框是否为空，控制发送按钮状态
		messageInput.addEventListener('input', function () {
			sendBtn.disabled = this.value.trim() === '';
		});

		// 发送消息
		sendBtn.addEventListener('click', sendMessage);
		messageInput.addEventListener('keydown', function (e) {
			if (e.key === 'Enter' && !e.shiftKey) {
				e.preventDefault();
				sendMessage();
			}
		});

		// 发送消息函数
		function sendMessage() {
			const messageText = messageInput.value.trim();
			if (messageText === '') return;

			// 创建新消息元素
			const now = new Date();
			const timeString = `${now.getHours()}:${now.getMinutes().toString().padStart(2, '0')}`;

			const messageDiv = document.createElement('div');
			messageDiv.className = 'message sent';
			messageDiv.innerHTML = `
                    <div class="message-content">
                        ${messageText}
                    </div>
                    <div class="message-time">${timeString}</div>
                `;

			// 添加到消息列表并滚动到底部
			chatMessages.appendChild(messageDiv);
			chatMessages.scrollTop = chatMessages.scrollHeight;

			// 清空输入框并禁用发送按钮
			messageInput.value = '';
			sendBtn.disabled = true;

			// 模拟回复
			setTimeout(simulateReply, 1500);
		}

		// 模拟回复
		function simulateReply() {
			const replies = [
				"好的，我明白了",
				"这个想法不错，我会考虑的",
				"我稍后给你更多信息",
				"我们可以安排一个时间详细讨论",
				"谢谢你的分享！"
			];

			const randomReply = replies[Math.floor(Math.random() * replies.length)];
			const now = new Date();
			const timeString = `${now.getHours()}:${now.getMinutes().toString().padStart(2, '0')}`;

			const messageDiv = document.createElement('div');
			messageDiv.className = 'message received';
			messageDiv.innerHTML = `
                    <div class="message-content">
                        ${randomReply}
                    </div>
                    <div class="message-time">${timeString}</div>
                `;

			chatMessages.appendChild(messageDiv);
			chatMessages.scrollTop = chatMessages.scrollHeight;
		}

		// 切换聊天对象
		chatItems.forEach(item => {
			item.addEventListener('click', function () {
				// 移除所有活跃状态
				chatItems.forEach(i => i.classList.remove('active'));
				// 添加当前活跃状态
				this.classList.add('active');

				// 更新聊天头部信息
				const chatType = this.getAttribute('data-chat');
				const name = this.querySelector('.chat-name').textContent;
				const avatarSrc = this.querySelector('.chat-avatar img').src;

				partnerName.textContent = name;
				partnerAvatar.src = avatarSrc;

				// 根据聊天类型更新状态和资料按钮行为
				if (chatType === 'private') {
					partnerStatus.textContent = '在线 · 正在输入...';
					viewProfileBtn.onclick = () => {
						profileCard.classList.add('active');
						overlay.classList.add('active');
					};
				} else {
					partnerStatus.textContent = '12.5k 成员 · 32人在线';
					viewProfileBtn.onclick = () => {
						groupCard.classList.add('active');
						overlay.classList.add('active');
					};
				}

				// 清空消息区域（实际应用中会加载对应聊天记录）
				chatMessages.innerHTML = `
                        <div class="message received">
                            <div class="message-content">
                                欢迎来到与 ${name} 的聊天
                            </div>
                            <div class="message-time">刚刚</div>
                        </div>
                    `;

				// 在移动设备上点击聊天后隐藏侧边栏
				if (window.innerWidth <= 768) {
					chatSidebar.classList.remove('active');
				}
			});
		});

		// 查看资料卡片控制
		closeProfileBtn.addEventListener('click', function () {
			profileCard.classList.remove('active');
			overlay.classList.remove('active');
		});

		closeGroupBtn.addEventListener('click', function () {
			groupCard.classList.remove('active');
			overlay.classList.remove('active');
		});

		overlay.addEventListener('click', function () {
			profileCard.classList.remove('active');
			groupCard.classList.remove('active');
			overlay.classList.remove('active');
			// 关闭下拉菜单
			document.querySelectorAll('.dropdown-menu').forEach(menu => {
				menu.style.display = 'none';
			});
		});

		// 查看当前用户资料
		currentUserAvatar.addEventListener('click', function () {
			alert('查看当前用户资料');
			// 实际应用中会打开当前用户的资料页面
		});

		// 更多选项下拉菜单
		moreOptionsBtn.addEventListener('click', function (e) {
			e.stopPropagation();
			const dropdown = this.querySelector('.dropdown-menu');
			dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
		});

		// 点击其他区域关闭下拉菜单
		document.addEventListener('click', function () {
			document.querySelectorAll('.dropdown-menu').forEach(menu => {
				menu.style.display = 'none';
			});
		});

		// 移动设备菜单切换
		mobileMenuToggle.addEventListener('click', function () {
			chatSidebar.classList.toggle('active');
		});

		// 管理项点击事件
		document.querySelectorAll('.management-item').forEach(item => {
			item.addEventListener('click', function () {
				const actionName = this.querySelector('.item-name').textContent;
				alert(`执行操作: ${actionName}`);
				// 实际应用中会执行相应的管理操作
			});
		});

		// 聊天标签切换
		document.querySelectorAll('.chat-tab').forEach(tab => {
			tab.addEventListener('click', function () {
				document.querySelectorAll('.chat-tab').forEach(t => t.classList.remove('active'));
				this.classList.add('active');
				// 实际应用中会切换显示不同类型的聊天列表
			});
		});
	});
</script>


